<template>
  <div class="main">
    <div id="reveal-top container" class="reveal-top">
      <img class="img img-fluid " src="../assets/imgs/头部.png" alt="">
      <img class="imgs img-fluid " src="../assets/imgs/头部.png" alt="">

    </div>
    <div id="page2" class="s">
      <div class="title">**幸运转盘(ui随便的只做功能)</div>
         <div class="content">
           <div class="cjb">
              <div :class="['item',{'zj':item==winningTheJackpotNum}]" v-for="(item,index) in itemArr">文物/其他{{item}}</div>

           </div>
           <div class="cl" @click="db">{{ buttonLabel }}</div>
         </div>
    </div>
  </div>
</template>

<script setup lang="js">
import scrollReveal from 'scrollreveal'
import {onMounted, reactive, ref, watch} from 'vue'
// 抽奖
const  buttonLabel=ref('点击抽奖')
const itemArr=[1,2,3,4,5,6,7,8,9]
const winningTheJackpotNum=ref(null)
// 随机抽奖数
const getRandomNumber = (arr) => {
  const randomIndex = Math.floor(Math.random() * arr.length);

  return arr[randomIndex];
};

const db=()=>{
  let interval =1000;
  buttonLabel.value = '正在抽奖...'
  const startInterval = () => {
    const timer = setTimeout(() => {

      const randomNumber = getRandomNumber(itemArr);
      winningTheJackpotNum.value=randomNumber

      console.log(randomNumber);
      interval -= 60; // 时间逐渐减少，加快速度



      if (interval <= 0) {
        buttonLabel.value="点击抽奖"
        clearInterval(timer);
      } else {
        startInterval();
      }
    }, interval);
  };

  startInterval();
}


const data = reactive({
  // 3.在reactive()中声明scrollReveal组件
  scrollReveal: scrollReveal(),

})
// 4.设置scrollReveal的方法
const retScroll = () => {
 data.scrollReveal.debug = true;
  // reveal()的类名可以为id (#reveal-top) 也可以为class(.reveal-top) 名称随意 并且也支持并集class写法 注意必须设置类否则无法使用
/*  data.scrollReveal.reveal('#reveal-top', {

    // 动画的时长
    duration: 600,
    // 延迟时间
    delay: 0,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: 'bottom',
    // 回滚的时候是否再次触发动画
    reset: true,
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    // // useDelay: 'onload',
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: '0px',
    // 其他可用的动画效果
    opacity: 0.001,
    // 执行速度 线性函数啥的
    easing: 'cubic-bezier(0.5, 0, 0, 1)',
    // 执行方式（缩放）
    scale: 0.9,
    // 使用执行之前的回调函数
    beforeReveal: function (ele) {
      console.log('使用执行之前的回调函数');
    },
    afterReveal:function (){
      console.log("使用执行之后的回调函数")
    },

  })*/
  data.scrollReveal.reveal('.img',{delay:"1000",
    distance: '200px',//从多元的距离开始升上来
    duration: 500,//升上来的时间有多少，
    easing: 'ease-in',//什么动画方式进来
    interval: 500,
    // distance: '0px',
    opacity: 0,
    // 回滚的时候是否再次触发动画
    reset: true,
    // origin: 'top',
    // 旋转
    rotate: {
      x: 20,
      z: 20,
      y:20,
    },
  scale: 0.85
})
  data.scrollReveal.reveal('.imgs',{delay:"1000",
    distance: '200px',//从多元的距离开始升上来
    duration: 300,//升上来的时间有多少，
    easing: 'ease-in',//什么动画方式进来
    interval: 500,
    // distance: '0px',
    opacity: 0,
    // 回滚的时候是否再次触发动画
    reset: true,
    origin: 'left',
    // 旋转
    rotate: {
      x: 20,
      z: 20,
      y:20,
    },
  scale: 0.85
})
}
// 5.页面加载生命周期
onMounted(() => {
  // 6.启动scrollReveal的方法
  retScroll()
})


</script>

<style scoped lang="scss">
.main {

  margin: 0;
  padding: 0;

  .reveal-top {
    width: 100vw;
    height: 100vh;
    background-color: green;
    img{
      width: 100%;
    }
  }

  .s {

    background-image: url(../assets/imgs/bg.png);
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;

    .title {
      text-align: center;
      font-size: 20px;
      font-weight: bolder;
      color: #ffffff;
    }

    .content {
      width: 90%;
      height: 80%;
      background-color: skyblue;
      margin: 0 auto;
      margin-top: 10px;
      .cjb{
        width: 100%;
        height: 80%;
        background-color: greenyellow;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        .item{
          width: 95px;
          height:100px;
          background-color: pink;
          line-height: 100px;
          text-align: center;
          font-weight: 900;
          color: #cb0c0c;
        }
      }
      .cl{
        text-align: center;
        width: 30%;
        height: 40px;
        background-color: red;
        color: white;
        line-height: 40px;
        padding: 10px;
        border-radius: 20px;
        margin: 20px auto;
      }
    }
  }
}

.main::-ms-scrollbar {
  width: 0;
}

.main::-webkit-scrollbar {
  width: 0;
}
.zj{
  background-color: #16c9b9 !important;
}
</style>
